<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-12 13:46:54
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.easy-in-manage-add
  .title.flex.justify-center.bold.mb4 {{ rowId ? "编辑" : "新增" }}
  .form-content.flex.justify-between.align-baseline
    .require
      .overdue.mb2.f3 必填
      el-form(
        ref="formRef",
        :model="form",
        :rules="rules",
        label-position="left",
        label-width="100px",
        status-icon
      )
        el-form-item(label="易入名称：", prop="name")
          el-input(v-model="form.name", placeholder="请输入",maxlength="20",clearable )
        el-form-item(label="行业类目：", prop="category_id")
          el-select(
            v-model="form.category_id",
            placeholder="请选择",
            clearable,
            @change="categoryChange"
          )
            el-option(
              v-for="item in categoryList",
              :key="item.id",
              :label="item.name",
              :value="item.id"
            )

        el-form-item(label="图片：", prop="image")
          el-upload.avatar-uploader(
            action="https://api.ekee.com.cn/api/common/upload",
            :show-file-list="false",
            :on-success="handleAvatarSuccess"
          )
            <img v-if="form.image" :src="form.image" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">  <Plus /></el-icon>
            //-  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        el-form-item(label="收货区域：", prop="address_ids")
          el-cascader(
            v-model="form.address_ids",
            :options="areaData",
            :props="propsAddress",
            expandTrigger="hover",
            @change="handleChange",
            placeholder="请选择省/市/区/街道",
            style="width: 100%",
            ref="cascaderAddr"
          )
            //- el-select.input-width(v-model="form.address" placeholder="请选择" clearable)

        el-form-item(label="截止时间：", prop="deadline")
          el-date-picker.input-width(
            v-model="form.deadline",
            type="datetime",
            format="YYYY-MM-DD HH:mm:ss",
            value-format="YYYY-MM-DD HH:mm:ss",
            placeholder="选择时间",
            :size="size",
            @change="timeChange"
          )
      .flex.justify-end.overdue 到达截止日期后，需求会自动下架
    .no-require.flex1
      .mb2.f3 选填
      el-form-item(label="品牌要求：")
        el-input(v-model="form.require", placeholder="请输入", maxlength="50", clearable)
      el-form-item(label="详细说明：")
        el-input(v-model="form.description", placeholder="请输入",type="textarea",maxlength="200", autosize,clearable)
  .flex.justify-center.mt4.mb4
    el-button.btn(
      type="primary",
      size="large",
      plain,
      round,
      @click="onCancel(formRef)"
    ) 取消
    el-button.btn(
      type="primary",
      size="large",
      round,
      @click="onConfirm(formRef)"
    ) 确认
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Category, Area } from "@/api/common";
import { DemandDetail } from "@/api/entrymanagement";

const props = defineProps({
  rowId: {
    type: String,
    default: "",
  },
});

// 生命周期
onMounted(() => {
  getArea();
  getCategory();
  console.log("sefs", props.rowId);
  if (props.rowId) {
    getDetail(props.rowId);
  }
});
//获取行业类目
const getCategory = () => {
  Category().then((res) => {
    categoryList.value = res.data;
  });
};
const categoryList = ref([]);
const categoryChange = (val) => {
  console.log("val", val);
  form.value.category_id = val;
};
const getDetail = (rowId) => {
  DemandDetail({ id: rowId }).then((res) => {
    if (res.code == 1) {
      // form.value = res.data;
      // form.value.address = "杭州市";
      form.value.id = res.data.id;
      form.value.name = res.data.name;
      form.value.category_id = res.data.category_id;
      form.value.image = res.data.image;
      form.value.province = res.data.province; //省
      form.value.city = res.data.city; //市
      form.value.county = res.data.county; //区
      form.value.deadline = res.data.deadline; //时间 2023-10-20 20:00:00
      form.value.require = res.data.require;
      form.value.description = res.data.description;
      form.value.address_ids = res.data.address_ids.split(",").map(Number);
    }
  });
};

//地址
const propsAddress = {
  expandTrigger: "hover",
  label: "name",
  value: "id",
  children: "children",
};
//省市区列表
const areaData = ref([]);
//获取省市区
const getArea = () => {
  Area()
    .then((res) => {
      if (res.code == 1) {
        areaData.value = res.data;
      }
    })
    .catch((err) => {});
};

//获取节点
const cascaderAddr = ref(null);
const handleChange = (e, formlist, thsAreaCode, value) => {
  if (cascaderAddr.value.getCheckedNodes()[0] != undefined) {
    thsAreaCode = cascaderAddr.value.getCheckedNodes()[0].pathLabels; // 注意2： 获取label值

    form.value.province = thsAreaCode[0];
    form.value.city = thsAreaCode[1];
    form.value.county = thsAreaCode[2];
    console.log("from", form.value); // 注意3： 最终结果是个一维数组对象
  } else {
    form.value.province = "";
    form.value.city = "";
    form.value.county = "";
  }
};

const formRef = ref();
const rules = ref({
  name: [
    { required: true, message: "请输入易入名称", trigger: "blur" }
  ],
  category_id: [
    {
      required: true,
      message: "请选择行业类目",
      trigger: "change",
    },
  ],
  image: [
    {
      required: true,
      message: "请选择图片",
      trigger: "change",
    },
  ],
  address_ids: [
    {
      required: true,
      message: "请选择收货区域",
      trigger: "change",
    },
  ],
  deadline: [
    {
      type: "date",
      required: true,
      message: "请选择截止时间",
      trigger: "change",
    },
  ],
  require: [{ required: false, message: "", trigger: "blur" }],
  description: [{ required: false, message: "", trigger: "blur" }],
});
const form = ref({
  id: "",
  name: "",
  category_id: "",
  image: "",
  province: "", //省
  city: "", //市
  county: "", //区
  deadline: "", //时间 2023-10-20 20:00:00
  require: "",
  description: "",
  address_ids: [],
});

const emits = defineEmits(["cancel", "confirm"]);

// const handleAvatarSuccess = (response, uploadFile) => {
//   // form.image.value = URL.createObjectURL(uploadFile.raw!)
// };

//上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log("上传", response, uploadFile);
  form.value.image = response.data.url;
  // formData.value.list.push({
  //   name: uploadFile.name,
  //   path: response.data.fullurl,
  // });
};

//时间选择
const timeChange = (val) => {
  form.value.deadline = val;
  console.log("val", val);
};

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

// 确认
const onConfirm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      form.value.address_ids = form.value.address_ids.join(",");
      console.log("submit!", form.value);
      emits("confirm", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="stylus" scoped>
.easy-in-manage-add {
  .title {
    font-size: 24px;
  }

  .form-content {
    padding: 0px 66px;

    .require {
      width: 327px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }

    .no-require {
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }
  }

  .input-width {
    width: 245px;
  }

  .btn {
    width: 178px;
  }

  .overdue {
    color: #E84026;
  }

  .refund {
    color: #2487E8;
  }

  .no-quota {
    margin-top: 200px;
  }

  // 上传图片相关
  .avatar-uploader .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: #dcdfe6;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  }

  .avatar-uploader .avatar {
    width: 152px;
    height: 100px;
    display: block;
  }
}
</style>
